body {
  margin: 0px;
}

.border-box {
  border: 1px solid #ff0000;
  box-sizing: border-box;
  margin: 0.5rem;
}

.flex-box1 {
  /* 压力布局会将它里面第一级的子元素压迫成一行显示 */
  display: flex;
  /* 
    justify-content是水平方式的对齐方式
    space-between表示分散对齐
  */
  justify-content: space-between;
}

.flex-box2 {
  display: flex;
  /* space-around是将空白平均分配到每一个子元素的两侧 */
  justify-content: space-around;
}

.flex-box3 {
  display: flex;
  /* center表示居中,flex-start左，flex-end右 */
  justify-content: flex-end;
}

.flex-box4 {
  display: flex;
  /* 
    align-items是交叉轴对齐方式（垂直对齐）
    center是居中，flex-start是顶部对齐，flex-end是底部对齐
    3,3,8,8 = 24
  */
  align-items: center;
}

.flex-box5 {
  display: flex;
}

.flex3 {
  flex: 3;
}

.flex2 {
  flex: 2;
}

.flex1 {
  flex: 1;
}

.flex-box6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

/* 
  选择器a > 选择器b 表示选择器a里面的第一级的子元素选择器b
  .flex-box6 > div表示
  class为flex-box6的元素里面的第一级的div元素
*/
.flex-box6 > div {
  border: 1px solid #ff0000;
  margin: 5px;

  width: 30vw;
  height: 18vw;
}
